<form nz-form (ngSubmit)="search()" [nzLayout]="'inline'">
    <div nz-row  [nzType]="'flex'" [nzJustify]="'start'" [nzGutter]="24">
        <div nz-col [nzSpan]="8" class="mb-md">
            <div nz-form-item class="d-flex">
                <div nz-form-label><label for="name">角色姓名</label></div>
                <div nz-form-control class="flex-1">
                    <nz-input [(ngModel)]="role.roleName" name="roleName" [nzSize]="'large'" [nzPlaceHolder]="'角色姓名'" nzId="roleName"></nz-input>
                </div>
            </div>
        </div>

        <div nz-col [nzSpan]="8" class="mb-md">
            <div nz-form-item class="d-flex">
                <div nz-form-label><label for="name">角色编号</label></div>
                <div nz-form-control class="flex-1">
                    <nz-input [(ngModel)]="role.roleCode" name="roleCode" [nzSize]="'large'" [nzPlaceHolder]="'角色编号'" nzId="roleCode"></nz-input>
                </div>
            </div>
        </div>
        <div *ngIf="expandForm" nz-col [nzSpan]="8" class="mb-md">
            <div nz-form-item class="d-flex">
                <div nz-form-label><label for="updatedAt">隶属应用</label></div>
                <div nz-form-control class="flex-1">
                    <nz-select style="width:100%" [(ngModel)]="role.guidApp" name="guidApp" nzAllowClear [nzSize]="'large'" [nzPlaceHolder]="'隶属应用'" nzId="guidApp">
                        <nz-option  *ngFor="let i of affiliation; let app = index" [nzLabel]="i.text" [nzValue]="i.key"></nz-option>
                    </nz-select>
                </div>
            </div>
        </div>
        <div nz-col [nzSpan]="expandForm ? 24 : 8" class="mb-md" [class.text-right]="expandForm">
            <button nz-button type="submit" [nzType]="'primary'" [nzLoading]="loading" [nzSize]="'large'">查询</button>
            <button nz-button type="reset" (click)="reset()" [nzSize]="'large'" class="mx-sm">重置</button>
            <a (click)="expandForm=!expandForm">
                {{expandForm ? '收起' : '展开'}}
                <i class="anticon" [class.anticon-down]="!expandForm" [class.anticon-up]="expandForm"></i>
            </a>
        </div>
    </div>
</form>

<!-- 监听列表组件，如果点击了则告诉弹出框组件，打开弹出框,监听addCreat方法-->
<app-list (addCreat)="addHandler($event)"
          (buttonData)="buttonDataHandler($event)"
          (pageNumber)="monitorHandler($event)"
          [selectedRows]="selectedRows"
          (deleatData)="deleatData($event)"
          (isActive)="isActive($event)"
          (buttonEvent)="buttonEvent($event)"
          (deleteBatch)="deleteBatch($event)"
          (selectedRow)="selectedRow($event)"
          [initDate] = "data"
          [buttons]="buttons"
          [headerDate] = "headerData"
          [loading]="listloading"
          [pageindex]='role.pi'
          [moreData] = "moreData"
          [configTitle]="configTitle"
          [total]="total"></app-list>

<!--引入列表组件-->


<nz-modal [nzVisible]="modalVisible"  [nzMaskClosable]="false" [nzWidth]="1024"   [nzTitle]="'分配角色'" [nzConfirmLoading]="loading" [nzContent]="modalContent"
          (nzOnCancel)="modalVisible=false" (nzOnOk)="subAddrole()">
    <ng-template #modalContent>
        <nz-transfer
            [nzDataSource]="list"
            nzShowSearch
            [nzTitles]="['可选成员', '已选成员']"
            [nzOperations]="['分配', '取消']"
            [nzListStyle]="{'width.%': 42, 'height.px': 500}"
            [nzFilterOption]="filterOption"
            (nzSearchChange)="searchpro($event)"
            (nzSelectChange)="select($event)"
            (nzChange)="change($event)"
        >
            <ng-template #render let-item>
                {{item.description}}({{item.guid}})
            </ng-template>

        </nz-transfer>

    </ng-template>
</nz-modal>
